@extends('home.layout.base')
@section('styles')
    <link href="{{ asset('css/index.css') }}" rel="stylesheet">
    <style>
        .el-table__row{
            height: 75px;line-height: 75px;
        }
        .verify,.refuse{
            position: absolute;font-size: 12px;
            color: #fff;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            z-index: 999;padding: 0 5px;
            top: 16px;
            left: 10px;
        }
        .verify{
            background: #13afe0;
        }
        .refuse{
            background: #e32c28;
        }
    </style>
@endsection
@section('scripts')
    <script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/index.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: function() {
                    return {
                        listData: {!! $lists !!},
                        loading: false,//加载loading开关
                        params:{page : 1},
                    }
                },
                methods: {
                    list() {
                        let that = this;
                        this.loading = true;
                        setTimeout(()=>{
                            $.get("{{ route('user.index.article') }}",this.params,function(res){
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.listData = res.data;
                                    that.loading = false;
                                }
                            })
                        },300);
                    },
                    edit(id) {
                        window.location.href = "{{ route('user.index.edit') }}"+'?id='+id;
                    },
                    info(id) {
                        window.open("{{ route('home.new.info') }}"+'?id='+id, '_blank');
                    },
                    destroy(id){
                        let that = this;
                        $.post("{{ route('user.index.destroy') }}",{id:id , _token:"{{csrf_token()}}"},function(res){
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        })
                    },
                    changePage(val) {
                        this.params.page = val;
                        this.list();
                    },
                }
            });
        })
    </script>
@endsection
@section('content')
    @include('user.layout.head')
    <div class="container main">
        <div class="row">
            <div class="col-lg-2 user-left">
                @include('user.layout.left')
            </div>
            <div class="col-lg-10 main-list-item user-right" id="app" v-cloak>
                <div class="user-right-note">文章管理 <a href="{{ route('user.index.publish') }}">发布</a></div>
                <div class="col-lg-12 main-list-item user-right-list" style="padding-left: 15px;padding-right: 15px">
                    <el-table v-loading="loading" element-loading-text="数据加载中..."
                              element-loading-spinner="fa fa-spinner fa-pulse"
                              tooltip-effect="dark" :data="listData.data">
                        <el-table-column align="center" prop="thumb" label="封面" width="120">
                            <template slot-scope="scope">
                                <img :src="scope.row.thumb" style="height: 70px;width: 110px"/>
                                <span class="verify" v-if="scope.row.status == 2">待审核</span>
                                <span class="refuse" v-if="scope.row.status == 3">未通过</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="title" :show-overflow-tooltip="true" label="标题" width="300">
                            <template slot-scope="scope">
                                <a v-if="scope.row.status == 1" href="javascript:void(0)" @click="info(scope.row.id)">@{{ scope.row.title }}</a>
                                <a v-else href="javascript:void(0)">@{{ scope.row.title }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="praise" label="点赞量" width="80"></el-table-column>
                        <el-table-column align="center" prop="view" label="浏览量" width="80"></el-table-column>
                        <el-table-column align="center" prop="created_at" label="创建日期" width="140">
                            <template slot-scope="scope">@{{ moment(scope.row.created_at).format('YYYY-MM-DD HH:mm') }}</template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="edit(scope.row.id)" icon="fa fa-edit" type="primary" size="mini" plain>
                                    编辑
                                </el-button>
                                <el-button @click="destroy(scope.row.id)" icon="fa fa-trash"
                                           type="info" size="mini" plain> 删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="col-lg-12 liange-pagination">
                        <el-pagination v-if="listData && listData.last_page > 1"
                                       background
                                       :page-size="listData.per_page"
                                       layout="prev, pager, next, jumper"
                                       :total="listData.total"
                                       prev-text="上一页"
                                       next-text="下一页"
                                       :current-page="listData.current_page"
                                       @current-change="changePage">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

